<template>
  <div>
    <div>
      <el-button type="success" icon="el-icon-plus" @click="handleAdd()"
        >新增活动类型</el-button
      >
    </div>

    <el-dialog
      title="新增活动类型"
      :visible.sync="addFormVisible"
      :close-on-click-modal="false"
      @close="handleAddCancel()"
      width="30%"
    >
      <el-form
        :model="addForm"
        :rules="addRules"
        ref="addForm"
        label-position="left"
        label-width="90px"
      >
        <el-form-item label="类型名称" prop="discountSortName">
          <el-input
            v-model="addForm.discountSortName"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="活动描述" prop="discountDescr">
          <el-input
            type="textarea"
            autosize
            v-model="addForm.discountDescr"
            placeholder="（选填）"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="活动状态" prop="discountSortState">
          <el-radio-group v-model="addForm.discountSortState">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleAddCancel()">取 消</el-button>
        <el-button type="primary" @click="handleAddConfirm()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="编辑活动类型"
      :visible.sync="editFormVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <el-form :model="editForm" label-position="left" label-width="90px">
        <el-form-item label="类型名称">
          <el-input v-model="editForm.discountSortName"></el-input>
        </el-form-item>
        <el-form-item label="活动描述">
          <el-input
            type="textarea"
            v-model="editForm.discountDescr"
            placeholder="（选填）"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动状态">
          <el-radio-group v-model="editForm.discountSortState">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditConfirm()">确 定</el-button>
      </div>
    </el-dialog>

    <div id="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="discountSortNumber" label="类型编号" width="180">
        </el-table-column>
        <el-table-column prop="discountSortName" label="类型名称" width="180">
        </el-table-column>
        <el-table-column prop="discountDescr" label="描述"> </el-table-column>
        <el-table-column label="活动状态">
          <template slot-scope="scope"
            ><el-switch
              v-model="scope.row.discountSortState"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              active-text="开启"
              inactive-text="关闭"
              @change="handleState(scope.row.discountSortNumber)"
            >
            </el-switch
          ></template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template></el-table-column> -->
      </el-table>
    </div>

    <div id="pagination">
      <!-- FIXME 分页html -->
      <el-pagination
        background
        :current-page="currentPage"
        layout="total,prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="pageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "cuxiaohuodong-leixing",
  data() {
    return {
      switchValue: true,
      total: 100,
      pageSize: 5,
      currentPage: 1,
      activeName: "first",
      addFormVisible: false,
      editFormVisible: false,
      addForm: {
        discountSortName: "",
        discountDescr: "",
        discountSortState: 0,
      },
      editForm: {},
      tableData: [],
      addRules: {
        discountSortName: [
          { required: true, message: "请选择活动类型", trigger: "change" },
        ],
        discountSortState: [{ required: true, trigger: "change" }],
      },
    };
  },
  methods: {
    handleAdd() {
      this.addFormVisible = true;
      this.$nextTick(() => {
        this.$refs["addForm"].resetFields();
      });
    },
    handleState(number) {
      //FIXME 类型状态切换
      this.$axios({
        url: "/changeDstSortState",
        method: "get",
        params: { discount_sort_number: number },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        } else {
          this.$message({
            type: "warning",
            message: "修改失败!",
          });
        }
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.editForm = Object.assign({}, row);
      this.editFormVisible = true;
    },
    handleAddConfirm() {
      this.$axios({
        url: "/addDstSort",
        method: "get",
        params: {
          discountSortName: this.addForm.discountSortName,
          discountDescr: this.addForm.discountDescr,
          discountSortState: this.addForm.discountSortState,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$refs["addForm"].resetFields();
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.addFormVisible = false;
        } else {
          this.$message({
            type: "warning",
            message: "添加失败!",
          });
        }
      });
      this.addFormVisible = false;
    },
    handleAddCancel() {
      this.$refs["addForm"].resetFields();
      this.addFormVisible = false;
    },
    handleEditConfirm() {
      this.editFormVisible = false;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将删除该活动类型, 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          // this.$axios({
          //   url: "/DctSort/delDsSort",
          //   methods: "post",
          //   data: "",
          // }).then((res) => {
          //   console.log(res);
          //   if (res.data.code == 200) {
          //     this.$message({
          //       type: "success",
          //       message: "删除成功!",
          //     });
          //   }else{
          //     this.$message({
          //       type: "warning",
          //       message: "删除失败!",
          //     });
          //   }
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    pageChange(current) {
      //FIXME 当前页切换
      this.currentPage = current;
      this.$axios({
        url: "/findDstSortAll",
        method: "get",
        params: {
          page: this.currentPage,
          num: this.pageSize,
        },
      }).then((res) => {
        console.log("页面切换res：", res);
        console.log("当前页：", this.currentPage);
        this.tableData = res.data.data;
      });
    },
  },
  mounted() {
    this.$axios({
      url: "/findDstSortAll",
      method: "get",
      params: {
        page: this.currentPage,
        num: this.pageSize,
      },
    }).then((res) => {
      console.log("类型res：", res);
      this.tableData = res.data.data;
    });
  },
};
</script>
<style lang="less" scoped>
#table,
#pagination {
  margin-top: 15px;
}
</style>